<template>
  <div class="search_id">
    <div class="title"><span>转正办理</span></div>
    <el-container>
      <el-main>
        <!-- 查询end  -->
        <el-col>
          <div style="float: left">
            <el-button
              type="primary"
              @click="dialogFormVisible = true"
              size="small"
              plain
              ><i class="el-icon-plus"></i>新增</el-button
            >
            <el-button
              type="danger"
              @click="DelListCar(delList)"
              size="small"
              plain
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </div>
        </el-col>

        <!-- 添加start -->
        <el-dialog title="付款申请" :visible.sync="dialogFormVisible">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item label="标题" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.title"
                  placeholder="请输入标题"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="付款金额" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.payPrice"
                  placeholder="请输入付款金额"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="结算方式" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.payMethod"
                  placeholder="请输入结算方式"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="支付对象" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.payObject"
                  placeholder="请输入支付对象"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="开户行" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.bankDeposit"
                  placeholder="请输入开户行"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="申请人" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.applicant"
                  placeholder="请输入申请人"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="审批人" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.approver"
                  placeholder="请输入审批人"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="审批状态" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.approveStatus"
                  placeholder="请输入审批状态"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="银行账号" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.bankAccount"
                  placeholder="请输入银行账号"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="付款日期" required>
              <el-col :span="11">
                <el-form-item prop="payDate">
                  <el-date-picker
                    type="date"
                    placeholder="付款日期"
                    v-model="ruleForm.payDate"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="创建日期" required>
              <el-col :span="11">
                <el-form-item prop="createTime">
                  <el-date-picker
                    type="date"
                    placeholder="创建日期"
                    v-model="ruleForm.createTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="用途描述" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.purposeDescript"
                  placeholder="请输入用途描述"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="备注" style="wdith: 100px">
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.remarks"
                  placeholder="请输入备注"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="票据附件" style="wdith: 100px">
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.billAttachment"
                  placeholder="请输入票据附件"
                ></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCar(ruleForm)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 添加end -->

        <!-- 修改start -->
        <el-dialog title="修改付款申请" :visible.sync="dialogFormVisibleEdit">
          <el-form
            :model="ruleFormEdit"
            status-icon
            :rules="rules"
            ref="ruleFormEdit"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item label="标题" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.title"
                  placeholder="请输入标题"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="付款金额" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.payPrice"
                  placeholder="请输入付款金额"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="结算方式" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.payMethod"
                  placeholder="请输入结算方式"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="支付对象" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.payObject"
                  placeholder="请输入支付对象"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="开户行" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.bankDeposit"
                  placeholder="请输入开户行"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="申请人" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.applicant"
                  placeholder="请输入申请人"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="审批人" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.approver"
                  placeholder="请输入审批人"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="审批状态" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.approveStatus"
                  placeholder="请输入审批状态"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="银行账号" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.bankAccount"
                  placeholder="请输入银行账号"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="付款日期" required>
              <el-col :span="11">
                <el-form-item prop="payDate">
                  <el-date-picker
                    type="date"
                    placeholder="付款日期"
                    v-model="ruleFormEdit.payDate"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="创建日期" required>
              <el-col :span="11">
                <el-form-item prop="createTime">
                  <el-date-picker
                    type="date"
                    placeholder="创建日期"
                    v-model="ruleFormEdit.createTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="用途描述" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.purposeDescript"
                  placeholder="请输入用途描述"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="备注" style="wdith: 100px">
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.remarks"
                  placeholder="请输入备注"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="票据附件" style="wdith: 100px">
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.billAttachment"
                  placeholder="请输入票据附件"
                ></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
            <el-button type="primary" @click="UpdCar(ruleFormEdit)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 修改end -->

        <!-- 显示start -->
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%; text-align: center"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed type="selection" width="55"> </el-table-column>
         <el-table-column
            prop="posName"
            label="姓名"
            width="120"
          ></el-table-column>

          <el-table-column
            prop="posID"
            label="部门"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="position"
            label="职位"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="principal"
            label="上级负责人"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="posEntryTimes"
            label="入职时间"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="posApply"
            label="申请日期"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="aPospprovalStatus"
            label="审批状态"
            width="120"
          >
          </el-table-column>
        <el-table-column
            prop="createTimes"
            label="创建时间"
            width="120"
          >
        </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row.id)"
                type="text"
                size="small"
                ><i class="el-icon-success"></i>查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="
                  (dialogFormVisibleEdit = true),
                    EditCar(scope.row)
                "
                ><i class="el-icon-edit"></i>编辑</el-button
              >
              <el-button
                type="text"
                size="small "
                @click="SingledelCar(scope.row.id)"
                ><i class="el-icon-close"></i>删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 显示end -->
        <!-- 分页start -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
        <!-- 分页ends -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "vehicle",
  data() {
    return {
      //表单数据
      tableData: [], //显示
      delList: [], //被选中的记录数据
      ids: [], //批量删除ID
      //分页
      currentPage: 1, //当前页码
      total: 0, //总条数
      pageSize: 5, //每页数据条
      //查询
      formInline: {
        title: "",
        PayDate: "",
        approveStatus: "",
        approver: "",
      },
      //添加
      dialogTableVisible: false,
      dialogFormVisible: false, //添加模态框
      dialogFormVisibleEdit: false, //反填模态框
      //添加
      ruleForm: {
        title: "",
        payPrice: "",
        payMethod: "",
        payObject: "",
        bankDeposit: "",
        applicant: "",
        approver: "",
        approveStatus: "",
        bankAccount: "",
        payDate: "",
        createTime: "",
        purposeDescript: "",
        remarks: "",
        billAttachment:""
      },
      //编辑
      ruleFormEdit: {
        title: "",
        payPrice: "",
        payMethod: "",
        payObject: "",
        bankDeposit: "",
        applicant: "",
        approver: "",
        approveStatus: "",
        bankAccount: "",
        payDate: "",
        createTime: "",
        purposeDescript: "",
        remarks: "",
        billAttachment:""
      },
      formLabelWidth: "120px",
      rules: {
        //验证
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        payPrice: [
          { required: true, message: "请输入付款金额", trigger: "blur" },
        ],
        payMethod: [
          { required: true, message: "请输入付款方式", trigger: "blur" },
        ],
        payObject: [
          { required: true, message: "请输入付款对象", trigger: "blur" },
        ],
        bankDeposit: [
          { required: true, message: "请输入开户行", trigger: "blur" },
        ],
        applicant: [
          { required: true, message: "请输入申请人", trigger: "blur" },
        ],
        approver: [
          { required: true, message: "请输入审批人", trigger: "blur" },
        ],
        approveStatus: [
          { required: true, message: "请选择审批状态", trigger: "change" },
        ],
        bankAccount: [
          { required: true, message: "请选择银行账号", trigger: "change" },
        ],
        payDate: [
          {
            type: "date",
            required: true,
            message: "请选择付款日期",
            trigger: "change",
          },
        ],
        createTime: [
          {
            type: "date",
            required: true,
            message: "请选择创建日期",
            trigger: "change",
          },
        ],
        purposeDescript: [
          { required: true, message: "请选择用途描述", trigger: "change" },
        ],
        remarks: [
          { required: true, message: "请选择备注", trigger: "change" },
        ],
        billAttachment: [
          { required: true, message: "请选择票据附件", trigger: "change" },
        ],
      },
      //上传图片
      RegistrationImg: "",
      MaintainCardImg: "",
      dialogVisible: false,
      //索引
      vehicleIndex: 0,
    };
  },
  created() {
    //商品显示
    this.GetList();
  },
  inject: ["reload"], //注入
  methods: {
    //查看
    handleClick(row) {
      console.log(row);
    },
    //全选
    handleSelectionChange(val) {
      console.log("handleSelectionChange--", val);
      this.delList = val; //把将要删除的数据存进集合中
    },
    // 分页
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //显示车辆管理集合
    GetList() {
      this.axios
        .get(
          "https://localhost:44330/api/app/positive-deal?Sorting=id"
        )
        .then((res) => {
          this.tableData = res.data.items;
          this.total = res.data.count;
        });
    },
    //添加车辆
    addCar(ruleForm) {
      this.axios({
        url: "https://localhost:44304/api/app/payment",
        method: "post",
        data: ruleForm,
      }).then((res) => {
        if (res.data.meta == 200) {
          this.$message.success("添加成功");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        } else {
          this.$message.error("添加失败");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        }
      });
    },
    //单删
    SingledelCar(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.delete(
            
              "https://localhost:44330/api/app/positive-deal/" + id
            ).then((res) => {
            if (res.data == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload(); //局部刷新
            } else {
              this.$message.error("删除失败");
              this.reload(); //局部刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //反填模态框
    EditCar(item) {
      this.dialogFormVisibleEdit == true;
      // this.ruleFormEdit=item;
      // var pid=item.id;
      // console.log(pid);
      this.axios
        .get(
          "https://localhost:44304/api/app/payment/" + item.id
        )
        .then((res) => {
          this.ruleFormEdit = res.data;
        });
    },
    //修改车辆
    UpdCar(ruleFormEdit) {
      this.axios({
        url: "https://localhost:44304/api/app/payment/"+ruleFormEdit.id,
        method: "put",
        data: ruleFormEdit,
      }).then((res) => {
        if (res.data.meta == 200) {
          this.$message.success("修改成功");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        } else {
          this.$message.error("修改失败");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        }
      });
    },
    //批量删除
    DelListCar(rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //循环获取要删除的Id并存进数组中
          rows.forEach((element) => {
            this.ids.push(element.registrationID);
          });
          // console.log(JSON.stringify(this.ids));
          // console.log(JSON.stringify(this.ids).length);
          //删除ID数组
          var num=JSON.stringify(this.ids).substring(1,JSON.stringify(this.ids).length-1);//装换成json格式在截取
          console.log(num);
          //Ajax执行删除
          this.axios({
            url:
              "http://192.168.31.63:8033/VehicleManagementAPI/DelCar?id=" +
              num,
            method: "post",
          }).then((res) => {
            console.log(res.data);
            if (res.data.meta == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload(); //局部刷新
            } else {
              this.$message.error("删除失败！");
              this.reload(); //局部刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.search_id {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.title {
  width: 100%;
  height: 50px;
  background-color: #f3f3f3;
}
.title span {
  float: left;
  padding-top: 15px;
  color: #999999;
  margin-left: -80px;
}
</style>